

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>JavaScript笔记-3 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JavaScript笔记-3">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-09-27 19:17" pubdate>
        2021年9月27日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      12.5k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      162
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript笔记-3</h1>
            
            <div class="markdown-body">
              <h1 id="JavaScript-3"><a href="#JavaScript-3" class="headerlink" title="JavaScript-3"></a>JavaScript-3</h1><h2 id="1-模板的使用"><a href="#1-模板的使用" class="headerlink" title="1.模板的使用"></a>1.模板的使用</h2><p>模板可以让我们通过一个固定的格式批量生成，可以批量生成的JS框架，叫模板引擎</p>
<p>现行的模板引擎里面有很多</p>
<ul>
<li><code>art-template</code></li>
<li><code>ejs</code></li>
<li><code>jade</code></li>
<li><code>pug</code></li>
<li><code>hbs</code></li>
</ul>
<p>我们本堂课程以<code>art-template</code>为标准来进行学习，我们需要从网站上面下载这个程序库，然后引入到网页里面</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/template-web.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="标准语法"><a href="#标准语法" class="headerlink" title="标准语法"></a>标准语法</h3><p><code>art-template</code>有两种语法，一种是标准语法，另一种是简洁语法，现在我们先从标准语法开始</p>
<h4 id="定义模板"><a href="#定义模板" class="headerlink" title="定义模板"></a>定义模板</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars"><span class="hljs-comment">&lt;!--或者 type=&quot;text/template&quot;--&gt;</span></span></span><br><span class="xml"><span class="handlebars">        &lt;%for(var i=0;i&lt;arr.length;i++)&#123;%&gt;</span></span><br><span class="xml"><span class="handlebars">            &lt;%if(arr[i].sex==&quot;男&quot;)&#123;%&gt;</span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>姓名：&lt;%=arr[i].stuName%&gt; -------性别：&lt;%=arr[i].sex%&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            &lt;%&#125;%&gt;</span></span><br><span class="xml"><span class="handlebars">        &lt;%&#125;%&gt;</span></span><br><span class="xml"><span class="handlebars"></span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面定义的模板里面，我们使用了<code>&lt;%%&gt;</code>这个符号，这个符号的作用就是在模板里面写ECMAScript代码。同时我们在这个符号里面定了一个for循环，同时我们也使用了<code>if</code>的条件语法</p>
<h4 id="使用模板"><a href="#使用模板" class="headerlink" title="使用模板"></a>使用模板</h4><p>当我们在页面上面引入了<code>template-web.js</code>这个文件以后，它就会提供给我们一个方法，叫<code>template</code>方法，这个方法是让我们根据数据来批量生成HTML标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/template-web.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/studentList.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> htmlStr = template(<span class="hljs-string">&quot;temp1&quot;</span>, &#123;</span><br><span class="javascript">        <span class="hljs-attr">arr</span>: studentList</span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> ul1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.ul1&quot;</span>);</span><br><span class="javascript">    ul1.innerHTML = htmlStr;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/613a00ae44eaada73949c511.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210909160429403"></p>
<h3 id="简洁语法"><a href="#简洁语法" class="headerlink" title="简洁语法"></a>简洁语法</h3><p>这个语法与是模板的语法，它全部用起来非常简单，只需要记住几个常用的命令即可</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/template&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> arr item index&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">            </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name"><span class="hljs-builtin-name">if</span></span> item.sex==<span class="hljs-string">&quot;男&quot;</span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>序号：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">index</span>&#125;&#125;</span><span class="xml">---姓名：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.stuName</span>&#125;&#125;</span><span class="xml">-------性别：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.sex</span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">                    你是一个</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.age</span>&gt;<span class="hljs-number">18</span>?<span class="hljs-string">&quot;成年人&quot;</span>:<span class="hljs-string">&quot;小屁孩子&quot;</span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            </span><span class="hljs-template-tag">&#123;&#123;/<span class="hljs-name"><span class="hljs-builtin-name">if</span></span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-tag">&#123;&#123;/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars"></span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们可以看到，我们使用了<code>&#123;&#123;each&#125;&#125;</code>来进行遍历，使用了<code>&#123;&#123;if&#125;&#125;</code>来进行判断</p>
<p>我们可以得出一个结论<code>&#123;&#123;&#125;&#125;</code>其实也是JS代码，所以我们在里面使用了条件语法</p>
<h4 id="案例–渲染表格"><a href="#案例–渲染表格" class="headerlink" title="案例–渲染表格"></a>案例–渲染表格</h4><p>现在有一组数据，需要渲染，性别为男则文字颜色为蓝色，性别为女则文字颜色为红色，数据格式如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> studentList = [<br>    &#123;<br>        <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;吴炂明&quot;</span>,<br>        <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>        <span class="hljs-attr">age</span>: <span class="hljs-number">18</span>,<br>        <span class="hljs-attr">hobby</span>: <span class="hljs-string">&quot;看书，睡觉，打豆豆&quot;</span><br>    &#125;, &#123;<br>        <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;李强&quot;</span>,<br>        <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>        <span class="hljs-attr">age</span>: <span class="hljs-number">22</span>,<br>        <span class="hljs-attr">hobby</span>: <span class="hljs-string">&quot;抽烟，喝酒，烫头&quot;</span><br>    &#125;<br>    <span class="hljs-comment">//....这里还有很多</span><br>]<br></code></pre></td></tr></table></figure>

<p><strong>第一种模板编写方法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> arr item index&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">            </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name"><span class="hljs-builtin-name">if</span></span> item.sex == <span class="hljs-string">&quot;男&quot;</span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color:blue&quot;</span>&gt;</span>姓名：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.stuName</span>&#125;&#125;</span><span class="xml">----性别：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.sex</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            </span><span class="hljs-template-tag">&#123;&#123;<span class="hljs-keyword">else</span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color:red&quot;</span>&gt;</span>姓名：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.stuName</span>&#125;&#125;</span><span class="xml">----性别：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.sex</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            </span><span class="hljs-template-tag">&#123;&#123;/<span class="hljs-name"><span class="hljs-builtin-name">if</span></span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-tag">&#123;&#123;/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars"></span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>第二种模板编写方法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> arr item index&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color:</span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.sex</span>==<span class="hljs-string">&#x27;男&#x27;</span>?<span class="hljs-string">&#x27;blue&#x27;</span>:<span class="hljs-string">&#x27;red&#x27;</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span>&gt;</span>姓名：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.stuName</span>&#125;&#125;</span><span class="xml">----性别：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.sex</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-tag">&#123;&#123;/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars"></span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>第三种模板编写方法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.b</span>&#123;</span><br><span class="css">        <span class="hljs-attribute">color</span>: blue;</span><br><span class="css">    &#125;</span><br><span class="css">    <span class="hljs-selector-class">.r</span>&#123;</span><br><span class="css">        <span class="hljs-attribute">color</span>: red;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> arr item index&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;</span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.sex</span>==<span class="hljs-string">&#x27;男&#x27;</span>?<span class="hljs-string">&#x27;b&#x27;</span>:<span class="hljs-string">&#x27;r&#x27;</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span>&gt;</span>姓名：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.stuName</span>&#125;&#125;</span><span class="xml">----性别：</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.sex</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-tag">&#123;&#123;/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars"></span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<hr>
<p>同时我们也可以把上面的数据生成一个<code>table</code>，如下所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>模板引擎生成表格<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.table1</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="css">            <span class="hljs-attribute">border-collapse</span>: collapse;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">80%</span>;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: auto;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.table1</span> <span class="hljs-selector-tag">th</span>,</span><br><span class="css">        <span class="hljs-selector-class">.table1</span> <span class="hljs-selector-tag">td</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> dotted black;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">35px</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span>;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;table1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;ckAll&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">                    全选</span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>姓名<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>性别<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>年龄<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>爱好<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>操作<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> list item index&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.stuName</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.sex</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.age</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.hobby</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>编辑<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>删除<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-tag">&#123;&#123;/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">    </span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/studentList.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/template-web.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> table1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.table1&gt;tbody&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> htmlStr = template(<span class="hljs-string">&quot;temp1&quot;</span>, &#123;</span><br><span class="javascript">        <span class="hljs-attr">list</span>: studentList</span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    table1.innerHTML = htmlStr;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/613a017944eaada7394b4dc5.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210909173136607"></p>
<h2 id="2-正则表达式"><a href="#2-正则表达式" class="headerlink" title="2.正则表达式"></a>2.正则表达式</h2><p> 正则表达式并不是JavaScript里面独有的技术，基本上所有的编程语言都支持这个技术。</p>
<p>正则表达式有以下几个特点【它的特点也可以认为是它的使用场景】</p>
<ol>
<li>正则表达式只对字符串进行操作</li>
<li>正则表达式做的是根据你所设定的<strong>规则</strong>对字符串进行“验证”，“提取”，“搜索”，“替换”等操作</li>
<li>JavaScript中的正则表达式是一个内置对象，它可以直接使用，它使用<code>RegExp</code>构造函数来创建，或直接使用字面量表示法<code> /正则规则/</code></li>
</ol>
<p>正则表达式分为三个部分</p>
<pre><code class=" mermaid">graph TD
A[正则表达式 ]--&gt;B[模式规则]
A--&gt;C[修饰符]
A--&gt;D[方法]
</code></pre>

<h3 id="正则表达式的创建"><a href="#正则表达式的创建" class="headerlink" title="正则表达式的创建"></a>正则表达式的创建</h3><p>正则表达式它是一个对象，我们要使用对象的方法去创建它的，它的构造函数是<code>RegExp</code>,它的语法如下</p>
<p><strong>第一种创建方式</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(pattern: string | <span class="hljs-built_in">RegExp</span>, flags?: string): <span class="hljs-built_in">RegExp</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>上面的pattern代表的是规则，后面的flags代表的是修饰符</p>
</blockquote>
<p>所以根所据上面的语法要求，我们可以偿试着去创建一个正则</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> reg1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">&quot;爱&quot;</span>);   <span class="hljs-comment">//这就是最基本的正则表达式创建</span><br><span class="hljs-keyword">var</span> reg2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">&quot;&quot;</span>,<span class="hljs-string">&quot;g&quot;</span>);	<span class="hljs-comment">//这里就添加了一个修饰符</span><br></code></pre></td></tr></table></figure>

<p><strong>第二种创建方式</strong></p>
<p>这一种创建方式我们叫字面量创建，它直接使用<code>/规则/</code>这种方式来创建</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> reg2 = <span class="hljs-regexp">/爱/</span>;<br><span class="hljs-built_in">console</span>.log(reg2);    <span class="hljs-comment">//  /爱/</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> reg2);  <span class="hljs-comment">// object</span><br></code></pre></td></tr></table></figure>

<p>上面就是正则表达式的创建过程，在学习正则表达式的过程当中，我们先了解正则表达式的两个方法</p>
<ol>
<li><code>test()</code>方法，用于验证某个字符串是否符合这个正则表达式规则(返回true或false)</li>
<li><code>exec()</code>方法，用于根据正则表达式去字符串中提取符合要求的字符</li>
</ol>
<p>同时要注意，正则表达式在创建的过程当中，它还可以添加修饰符<code>flags</code>，主要的修饰符有3个</p>
<ol>
<li><code>g</code>代表全局<code>global</code>的意思</li>
<li><code>i</code>代表<code>ignore</code>忽略大小写</li>
<li><code>m</code>代表<code>multipleline</code>多行的意思，也就是可以换行查找</li>
</ol>
<h3 id="正则表达式的规则"><a href="#正则表达式的规则" class="headerlink" title="正则表达式的规则"></a>正则表达式的规则</h3><h4 id="一元符"><a href="#一元符" class="headerlink" title="一元符"></a>一元符</h4><table>
<thead>
<tr>
<th align="left">元字符</th>
<th align="left">对应说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">.</td>
<td align="left">匹配除换行符之外的任意字符</td>
</tr>
<tr>
<td align="left">\w</td>
<td align="left">匹配字母数字下划线，等同于：[a-zA-Z0-9_]</td>
</tr>
<tr>
<td align="left">\s</td>
<td align="left">匹配任意空白符</td>
</tr>
<tr>
<td align="left">\d</td>
<td align="left">匹配数字，等同于[0-9]</td>
</tr>
<tr>
<td align="left">\b</td>
<td align="left">匹配单词边界</td>
</tr>
<tr>
<td align="left">|</td>
<td align="left">或匹配，如 /x|y/ 正则可匹配x或y两个字符</td>
</tr>
<tr>
<td align="left">^</td>
<td align="left">匹配字符串的开始</td>
</tr>
<tr>
<td align="left">$</td>
<td align="left">匹配字符串的结束</td>
</tr>
</tbody></table>
<h4 id="原子表与原子组"><a href="#原子表与原子组" class="headerlink" title="原子表与原子组"></a>原子表与原子组</h4><p><strong>原子表</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"> <span class="hljs-comment">//现在我希望匹配以下的东西杨标，陈标，张标</span><br><span class="hljs-comment">// 原子表指的是[]</span><br><span class="hljs-comment">// 原子组指的是()</span><br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/^[杨陈张]标$/</span>;<br>reg.test(<span class="hljs-string">&quot;杨标&quot;</span>);		<span class="hljs-comment">//true</span><br>reg.test(<span class="hljs-string">&quot;陈标&quot;</span>);		<span class="hljs-comment">//true</span><br>reg.test(<span class="hljs-string">&quot;张标&quot;</span>);		<span class="hljs-comment">//true</span><br>reg.test(<span class="hljs-string">&quot;李标&quot;</span>);     <span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<p>原子表是以中括号的形式存在，它会从这个表中拿一个出来进行匹配</p>
<p>在原子表里面，还可以写区间范围</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/[a-z]/</span>;  <span class="hljs-comment">//代表小写字母</span><br><span class="hljs-keyword">var</span> reg2 = <span class="hljs-regexp">/[A-Z]/</span>;  <span class="hljs-comment">//代表大写字母</span><br><span class="hljs-keyword">var</span> reg3 = <span class="hljs-regexp">/[0-9]/</span>;  <span class="hljs-comment">//代表数字，相当于\d</span><br></code></pre></td></tr></table></figure>

<p><strong>注意</strong>：<strong>原子表中的范围不能倒着写，写反了会报错</strong></p>
<p><strong>原子组</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//现在我希望匹配以下的东西杨标，陈标，张标</span><br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/杨标|陈标|张标/</span>;<br><span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/[杨陈张]标/</span>;<br><span class="hljs-comment">//上面的正则表达式是符合要求的，但是很繁琐</span><br><span class="hljs-keyword">var</span> reg2 = <span class="hljs-regexp">/(杨|陈|张)标/</span>;<br><span class="hljs-comment">//如果是用小括号包起来，就是原子组</span><br></code></pre></td></tr></table></figure>

<p>原子组后期的优点非常多</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;大家好，今天是2021-01-06 14:48:30,今天天气不好，有点冷&quot;</span>;<br><br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/(\d&#123;4&#125;)-(\d&#123;2&#125;)-(\d&#123;2&#125;) (\d&#123;2&#125;):(\d&#123;2&#125;):(\d&#123;2&#125;)/</span>;<br><br><span class="hljs-keyword">var</span> result = reg.exec(str);   <span class="hljs-comment">//通过正则表达式提取的结果</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>上面的案例就是通过原子组来进行的二次提取操作</p>
</blockquote>
<h4 id="反义字符"><a href="#反义字符" class="headerlink" title="反义字符"></a>反义字符</h4><table>
<thead>
<tr>
<th align="left">反义字符</th>
<th align="left">对应说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">[^x]</td>
<td align="left">匹配除“x”之外的所有字符，其中“x”可以为任意字符</td>
</tr>
<tr>
<td align="left">[^xyz]</td>
<td align="left">同上，匹配除“x、y、z”之外的任意字符</td>
</tr>
<tr>
<td align="left">\W</td>
<td align="left">匹配除了字母、数字、下划线之外的所有字符，等同于：<code>[^\w]</code></td>
</tr>
<tr>
<td align="left">\S</td>
<td align="left">匹配除空白符之外的任意字符，等同于：<code>[^\s]</code></td>
</tr>
<tr>
<td align="left">\B</td>
<td align="left">匹配不是单词边界的字符，等同于：<code>[^\b]</code></td>
</tr>
<tr>
<td align="left">\D</td>
<td align="left">匹配不是数字的所有字符，等同于：<code>[^\d]</code></td>
</tr>
</tbody></table>
<h4 id="转义字符"><a href="#转义字符" class="headerlink" title="转义字符"></a>转义字符</h4><table>
<thead>
<tr>
<th align="left">转义字符</th>
<th align="left">对应说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">\xnn</td>
<td align="left">匹配十六进制数</td>
</tr>
<tr>
<td align="left">\f</td>
<td align="left">匹配换页符，等同于：\x0c</td>
</tr>
<tr>
<td align="left">\n</td>
<td align="left">匹配换行符，等同于：\x0a</td>
</tr>
<tr>
<td align="left">\r</td>
<td align="left">匹配回车符，等同于：\x0d</td>
</tr>
<tr>
<td align="left">\t</td>
<td align="left">匹配水平制表符，等同于：\x09</td>
</tr>
<tr>
<td align="left">\v</td>
<td align="left">匹配垂直制表符，等同于：\x0b</td>
</tr>
<tr>
<td align="left">\unnnn</td>
<td align="left">匹配Unicode字符，如：\u00A0</td>
</tr>
</tbody></table>
<p>正则表达式里面一些特殊的东西是需要转义的，如<code>[,],/,.&#123;,&#125;,+,*,?</code>等，转义需要使用<code>\</code>表示</p>
<h4 id="重复匹配"><a href="#重复匹配" class="headerlink" title="重复匹配"></a>重复匹配</h4><table>
<thead>
<tr>
<th align="left">匹配字符</th>
<th align="left">对应说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">*</td>
<td align="left">重复出现零次或多次</td>
</tr>
<tr>
<td align="left">+</td>
<td align="left">重复出现一次或多次</td>
</tr>
<tr>
<td align="left">？</td>
<td align="left">重复出现零次或一次</td>
</tr>
<tr>
<td align="left">{n}</td>
<td align="left">重复出现n次</td>
</tr>
<tr>
<td align="left">{n,}</td>
<td align="left">至少重复出现n次</td>
</tr>
<tr>
<td align="left">{m,n}</td>
<td align="left">重复重现m到n次，其中，m&lt;n</td>
</tr>
</tbody></table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//我们希望验证一个字符串，它是a开始，以c结束。中间有4个英文字母怎么办呢</span><br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/^a[a-zA-Z]c$/</span>;<br><span class="hljs-comment">//第一种写法，直接写4次，这是笨办法</span><br><span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/^a[a-zA-Z]&#123;4&#125;c$/</span>;<br><br><span class="hljs-comment">//验证一个字符串，它是a开始，c结束，中间有4~6个数字，怎么办</span><br><span class="hljs-keyword">var</span> reg2 = <span class="hljs-regexp">/^a\d&#123;4,6&#125;c$/</span>;<br><br><span class="hljs-comment">//验证一个字符串，它是a开始，c结束，中间有至少4个数字，怎么办</span><br><span class="hljs-keyword">var</span> reg3 = <span class="hljs-regexp">/^a\d&#123;4,&#125;c$/</span>;<br><br><span class="hljs-comment">//最多有四个数字</span><br><span class="hljs-keyword">var</span> reg4 = <span class="hljs-regexp">/^a\d&#123;0,4&#125;c$/</span>;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>上面的写法是我们的<code>m-n</code>的写法，还有一些特殊的写法</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//验证一个字符串，以a开始,c结束，中间可以有1个或多个数字</span><br><span class="hljs-keyword">var</span> reg4= <span class="hljs-regexp">/^a\d&#123;1,&#125;c$/</span>;<br><span class="hljs-comment">//或</span><br><span class="hljs-keyword">var</span> reg5 = <span class="hljs-regexp">/^a\d+c$/</span>;   <span class="hljs-comment">//+号代表1次多或次</span><br><br><span class="hljs-comment">//验证一个字符串，以a开始，以c结束，中间有0次或多次出数字</span><br><span class="hljs-keyword">var</span> reg6= <span class="hljs-regexp">/^a\d*c$/</span><br><br><span class="hljs-comment">//有一个姓名，它以杨开始，以标结束，中间可以有一个或0个字符，怎么办呢</span><br><span class="hljs-keyword">var</span> reg =  <span class="hljs-regexp">/^杨.?标$/</span><br></code></pre></td></tr></table></figure>

<h4 id="贪婪与惰性"><a href="#贪婪与惰性" class="headerlink" title="贪婪与惰性"></a>贪婪与惰性</h4><table>
<thead>
<tr>
<th align="left">相关字符</th>
<th align="left">对应说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">*?</td>
<td align="left">重复任意次，但尽可能少的重复</td>
</tr>
<tr>
<td align="left">+?</td>
<td align="left">重复一次或多次，但尽可能少的重复</td>
</tr>
<tr>
<td align="left">??</td>
<td align="left">重复零次或一次，但尽可能少的重复</td>
</tr>
<tr>
<td align="left">{m,n}?</td>
<td align="left">重复m到n次，但尽可能少的重复</td>
</tr>
<tr>
<td align="left">{n,}?</td>
<td align="left">重复n次以上，但尽可能少的重复</td>
</tr>
</tbody></table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;cbcertydiouycesdfsertd&quot;</span>;<br><br><span class="hljs-comment">//我的要求，提取以c开始,d结束,中间是任何长度的英文字母</span><br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/c[a-z]*d/</span>;<br><span class="hljs-comment">// 这个时候的正则是有问题的，*处理贪婪模式，它会贪式，（*代表0次到多次，它会贪多次）</span><br><span class="hljs-comment">//如果我们直接以reg为标准去匹配，我们会发现，它会从头匹配到尾，但是字符串中间是是有符合要求的</span><br><br><span class="hljs-keyword">var</span> reg2 = <span class="hljs-regexp">/c[a-z]*?d/g</span>;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/613f3e6544eaada73957a0ee.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210106162113155"></p>
<ul>
<li>贪婪模式：尽可能的选取多个【婪多个】</li>
<li>惰性模式：尽可能少取以个【懒惰】</li>
</ul>
<p>在禁止贪婪模式以后，就会变成惰性模式，它会尽可能的少重复</p>
<h4 id="原子组编号"><a href="#原子组编号" class="headerlink" title="原子组编号"></a>原子组编号</h4><p>在我们之前学习原子组的时候我们学过，可以将规则通过<code>()</code>来形成一个分组，其实在形成分组的时候，默认会形成一个分组编号</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;&lt;div&gt;&lt;/div&gt;&quot;</span>;<br><span class="hljs-comment">//现在希望编写一个正则去验证HTML的标签</span><br><span class="hljs-comment">//初步的思维</span><br><span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/&lt;[a-zA-Z0-9]+&gt;&lt;\/[a-zA-Z0-9]+&gt;/</span>;<br></code></pre></td></tr></table></figure>

<p>在上面的正则表达式当中，我们表面看起来是已经完成了功能，但是有隐患，如果我们的字符串是<code>&lt;div&gt;&lt;/span&gt;</code>这个时候它也会验证成功，这是不符合要求的</p>
<p>我们要求的是开始标签名与结束标签名保持一致。我开始匹配的内容<code>[a-zA-Z0-9]+</code>要与后面匹配的<code>[a-zA-Z0-9]+</code>保持一致，这怎么办呢，这个时候就要使用到原子组编号</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> reg2 = <span class="hljs-regexp">/&lt;([a-zA-Z0-9]+)&gt;&lt;\/\1&gt;/</span>;<br></code></pre></td></tr></table></figure>

<p>后面正则表达式所出现的<code>\1</code>代表的是匹配出来的第1个分组内容</p>
<p>我们还可以通过下面的案例来学习分组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;fdafffdaaklfjklja&quot;</span>;<br><span class="hljs-comment">//现在要求找出字符串中连续重复的字符串</span><br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/(\w)\1+/g</span>;<br>str.match(reg);  <span class="hljs-comment">//这样就可以得到结果了</span><br></code></pre></td></tr></table></figure>

<p>当然原子组的编号不仅仅只有1个，可以实现多个组的编号，如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str =<span class="hljs-string">&quot;ababcdefaceced1212rtioio4ybyb&quot;</span>;<br><span class="hljs-comment">//在里面找出那些有规律的两个一起重复的字符串</span><br><span class="hljs-keyword">var</span> reg =<span class="hljs-regexp">/(\w)(\w)\1\2/g</span>;<br>str.match(reg);<br></code></pre></td></tr></table></figure>

<p><strong>分组不产生原子组编号</strong></p>
<blockquote>
<p>()分组产生分组号</p>
<p>(?:)分组不产生原子组编号</p>
</blockquote>
<p>在正常情况下，原子组当中只要有了小括号就会在提取的时候产生编号，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;今天是9月10日，唉呀！今天又跑到香港去玩了，买了好多东西，购物花了我￥346.77元，结果吃饭只能用美元，花了我$34.78元,坐港铁花了￥11元。&quot;</span>;<br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/(?&lt;=[\$￥])\d+(\.\d+)?/g</span>;<br>reg.exec(str);<br><span class="hljs-comment">//得到结果如下</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/613f3f8144eaada73959570e.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210913141612135"></p>
<p>但是在这里，我们不需要这个编号，只是仅仅希望它们保持一个分组，所以就希望有一个技术是<strong>分组不编号</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/(?&lt;=[\$￥])\d+(?:\.\d+)?/g</span>;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/613f3fa344eaada739599204.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210913142248589"></p>
<h4 id="前瞻后顾"><a href="#前瞻后顾" class="headerlink" title="前瞻后顾"></a>前瞻后顾</h4><p>在弄清楚之个东西之前，先要让同学们知道什么是正则表达式的前后关系</p>
<blockquote>
<p>在学习这个地方之前，还一定要弄清楚，</p>
<ol>
<li>你的匹配条件是什么？</li>
<li>你的限制条件是什么？</li>
</ol>
<p>例如：李强要找一个女朋友 ，但是限定条件是这个女的要有钱，漂亮，身高170CM以上</p>
<ol>
<li>匹配条件：女</li>
<li>限定条件：有钱，漂亮，身高170CM</li>
</ol>
</blockquote>
<h5 id="前瞻"><a href="#前瞻" class="headerlink" title="前瞻"></a>前瞻</h5><p>前瞻(Look ahead positive): 匹配的是A,限制条件是A前面是B。</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs stylus"><span class="hljs-function"><span class="hljs-title">A</span><span class="hljs-params">(?=B)</span></span><br></code></pre></td></tr></table></figure>

<p>如<strong>想要匹配abc并且abc的前面是123的表达式，应该这样</strong></p>
<img src="https://pic.imgdb.cn/item/613f40cf44eaada7395b79b6.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210106172004702" style="zoom:80%;" />

<h5 id="负前瞻"><a href="#负前瞻" class="headerlink" title="负前瞻"></a>负前瞻</h5><p>负前瞻(Look ahead negative): 顾名思义，该正则匹配A，限制条件是A前面不是B</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs stylus"><span class="hljs-function"><span class="hljs-title">A</span><span class="hljs-params">(?!B)</span></span><br></code></pre></td></tr></table></figure>

<p>想要<strong>匹配abc并且abc的前面不是123的表达式，应该这样：</strong></p>
<img src="https://pic.imgdb.cn/item/613f417044eaada7395c6fdd.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210106172148524" style="zoom:80%;" />

<h5 id="后顾"><a href="#后顾" class="headerlink" title="后顾"></a>后顾</h5><p>后顾(Look behind positive ): 匹配表达式A，限制条件A的后面是B</p>
<figure class="highlight dns"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs dns">(?&lt;=B)<span class="hljs-keyword">A</span><br></code></pre></td></tr></table></figure>

<p>想要<strong>匹配abc并且abc的后面是123的表达式</strong></p>
<img src="https://pic.imgdb.cn/item/613f419444eaada7395cac75.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210106172636353" style="zoom:80%;" />

<h5 id="负后顾"><a href="#负后顾" class="headerlink" title="负后顾"></a>负后顾</h5><p>负后顾(Look behind negative ): 匹配表达式A,限制条件是A的后面不是B</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css">(?&lt;!<span class="hljs-selector-tag">B</span>)<span class="hljs-selector-tag">A</span><br></code></pre></td></tr></table></figure>

<p>想要<strong>匹配abc并且abc的后面不是123的表达式</strong>，应该这样：</p>
<img src="https://pic.imgdb.cn/item/613f41cd44eaada7395d0756.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210106172754076" style="zoom:80%;" />

<h3 id="正则表达式的操作方法"><a href="#正则表达式的操作方法" class="headerlink" title="正则表达式的操作方法"></a>正则表达式的操作方法</h3><table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>String.prototype.replace()</td>
<td>字符串替换</td>
</tr>
<tr>
<td>String.prototype.search()</td>
<td>字符串查找</td>
</tr>
<tr>
<td>String.prototype.match()</td>
<td>字符串匹配提取</td>
</tr>
<tr>
<td>String.prototype.split()</td>
<td>字符串根据正则表达式分割</td>
</tr>
<tr>
<td>RegExp.prototype.test()</td>
<td>根据正则规则验证字符串</td>
</tr>
<tr>
<td>RegExp.prototype.exec()</td>
<td>根据正则表达式规则提取字符串</td>
</tr>
</tbody></table>
<h4 id="test-验证"><a href="#test-验证" class="headerlink" title="test()验证"></a>test()验证</h4><p>这是<strong>正则表达式的一个方法</strong>，用于验证一个字符串是否符合正则的要求，如果符合就返回<code>true</code>，不符合就返回<code>false</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//正则表达式的验证是test方法，它是正则对象的方法</span><br><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 验证用户名，必须字母或下划线开头，后面接任意非空字符，总长度在6~10位</span><br><span class="hljs-comment">     * 验证年龄：必须是正整数</span><br><span class="hljs-comment">     * 验证性别：必须是男或女</span><br><span class="hljs-comment">     * 验证爱好：必须是 看书，睡觉，玩游戏三者之顺选择，可以选多个</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/^[a-z]\S&#123;5,9&#125;$/i</span>;<br>reg1.test(<span class="hljs-string">&quot;a123abd&quot;</span>);<br><br><span class="hljs-keyword">var</span> reg2 = <span class="hljs-regexp">/^\d+$/</span>;<br>reg2.test(<span class="hljs-string">&quot;12&quot;</span>);<br><br><span class="hljs-keyword">var</span> reg3 = <span class="hljs-regexp">/^[男女]$/</span>;<br><br><span class="hljs-comment">//这个正则要去掉重复的情况</span><br><span class="hljs-keyword">var</span> reg4 = <span class="hljs-regexp">/(看书|睡觉|玩游戏)+/</span>;<br></code></pre></td></tr></table></figure>

<h4 id="exec-提取"><a href="#exec-提取" class="headerlink" title="exec()提取"></a>exec()提取</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str =<span class="hljs-string">&quot;今天是9月10日，唉呀！今天又跑到香港去玩了，买了好多东西，购物花了我￥346.77元，结果吃饭只能用美元，花了我$34.78元,坐港铁花了￥10元。&quot;</span>;<br><span class="hljs-comment">//在上面的字符串里面，我们要提取所有的金额（美圆和人民币）</span><br></code></pre></td></tr></table></figure>

<p><strong>第一种方式的操作：手动操作</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//在上面的字符串里面，我们要提取所有的金额（美圆和人民币）</span><br><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;今天是9月10日，唉呀！今天又跑到香港去玩了，买了好多东西，购物花了我￥346.77元，结果吃饭只能用美元，花了我$34.78元,坐港铁花了￥11元。&quot;</span>;<br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/(?&lt;=[\$￥])\d+(\.\d+)?/g</span>;<br><span class="hljs-keyword">var</span> result = <span class="hljs-string">&quot;&quot;</span>;<br><span class="hljs-comment">//第一次提取						//346.77</span><br>result = reg.exec(str);<br><span class="hljs-built_in">console</span>.log(result);<br><span class="hljs-comment">//第二次提取						//34.78</span><br>result = reg.exec(str);		<br><span class="hljs-built_in">console</span>.log(result);<br><span class="hljs-comment">//第三次提取						//11</span><br>result = reg.exec(str);<br><span class="hljs-built_in">console</span>.log(result);<br><span class="hljs-comment">//第四次提取						//null</span><br>result = reg.exec(str);<br><span class="hljs-built_in">console</span>.log(result);<br></code></pre></td></tr></table></figure>

<p><strong>第二种方式的操作：使用循环</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> result = <span class="hljs-string">&quot;&quot;</span>;<br><span class="hljs-keyword">while</span> ((result = reg.exec(str)) != <span class="hljs-literal">null</span>) &#123;<br>    <span class="hljs-built_in">console</span>.log(result);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/613f3f8144eaada73959570e.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210913141612135"></p>
<blockquote>
<p>这一种正则表达式的提取是一种非常高级的提取方法，我们可以在复杂操作里面使用这个方法，但是一般简单的提取操作，我们会使用更简单的方法</p>
</blockquote>
<hr>
<h4 id="match-提取"><a href="#match-提取" class="headerlink" title="match()提取"></a>match()提取</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//match方法不是正则表达式对象的方法，它是字符串对象的方法</span><br><span class="hljs-comment">//match方法是匹配的意思，根据正则表达式来匹配</span><br><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;今天是9月10日，唉呀！今天又跑到香港去玩了，买了好多东西，购物花了我￥346.77元，结果吃饭只能用美元，花了我$34.78元,坐港铁花了￥11元。&quot;</span>;<br><span class="hljs-comment">//在上面的字符串里面，我们要提取所有的金额（美圆和人民币）</span><br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/(?&lt;=[\$￥])\d+(?:\.\d+)?/g</span>;<br><span class="hljs-comment">//以前是使用正则表达式为主体，去操作字符串</span><br><span class="hljs-comment">//现在是以字符串为主体，去匹配正则</span><br><span class="hljs-keyword">var</span> result = str.match(reg);   <span class="hljs-comment">//[&#x27;346.77&#x27;, &#x27;34.78&#x27;, &#x27;11&#x27;]</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们可以看到，<code>match</code>方法与正则表达式对象里面的<code>exec</code>方法都是用于提取符要求的字符的，但是<code>exec</code>可以做到原子组的提取，而<code>match</code>则不行，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;我的身份证号是425789199011150105,张三的身份证号是12355420050405233x&quot;</span>;<br>    <span class="hljs-comment">//写一个正则，提取字符串，并提取每个人性别组成对象</span><br>    <span class="hljs-comment">/*</span><br><span class="hljs-comment">        [&#123;</span><br><span class="hljs-comment">            IDCard:&quot;425789199011150105&quot;,</span><br><span class="hljs-comment">            birthday:&quot;1990-11-15&quot;,</span><br><span class="hljs-comment">            sex:&quot;女&quot;</span><br><span class="hljs-comment">        &#125;,&#123;</span><br><span class="hljs-comment">            IDCard:&quot;12355420050405233x&quot;,</span><br><span class="hljs-comment">            birthday:&quot;2005-05-05&quot;,</span><br><span class="hljs-comment">            sex:&quot;男&quot;</span><br><span class="hljs-comment">        &#125;]</span><br><span class="hljs-comment">    */</span><br><br>    <span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/\d&#123;17&#125;[\dx]/g</span>;<br>    <span class="hljs-keyword">var</span> result1 = str.match(reg1); <span class="hljs-comment">//[&#x27;425789199011150105&#x27;, &#x27;12355420050405233x&#x27;]</span><br><br>    <span class="hljs-comment">//上面明显不是最好的处理办法</span><br><br>    <span class="hljs-keyword">var</span> reg2 = <span class="hljs-regexp">/\d&#123;6&#125;(\d&#123;4&#125;)(\d&#123;2&#125;)(\d&#123;2&#125;)\d&#123;2&#125;(\d&#123;1&#125;)[\dx]/g</span>;<br>    <span class="hljs-keyword">var</span> result2 = <span class="hljs-string">&quot;&quot;</span>;<br>    <span class="hljs-keyword">var</span> arr = [];<br>    <span class="hljs-keyword">while</span> ((result2 = reg2.exec(str)) != <span class="hljs-literal">null</span>) &#123;<br>        <span class="hljs-keyword">var</span> obj = &#123;<br>            <span class="hljs-attr">IDCard</span>: result2[<span class="hljs-number">0</span>],<br>            <span class="hljs-comment">// birthday:result2.slice(1,4).join(&quot;-&quot;),</span><br>            <span class="hljs-attr">birthday</span>: result2[<span class="hljs-number">1</span>] + <span class="hljs-string">&quot;-&quot;</span> + result2[<span class="hljs-number">2</span>] + <span class="hljs-string">&quot;-&quot;</span> + result2[<span class="hljs-number">3</span>],<br>            <span class="hljs-attr">sex</span>: result2[<span class="hljs-number">4</span>] % <span class="hljs-number">2</span> == <span class="hljs-number">0</span> ? <span class="hljs-string">&quot;女&quot;</span> : <span class="hljs-string">&quot;男&quot;</span><br>        &#125;<br>        arr.push(obj);<br>    &#125;<br>    <span class="hljs-built_in">console</span>.log(arr);<br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>注意</strong>：无论是<code>exec()</code>还是<code>match()</code> 在目前阶段进行提取操作的时候，最后是加一个全局修饰符<code>g</code></p>
</blockquote>
<h4 id="split-分割"><a href="#split-分割" class="headerlink" title="split()分割"></a>split()分割</h4><p>字符串的split方法之前我们已经讲过了，它是通过某一个特定的字符去拆分字符串形成数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;get-element-by-id&quot;</span>;<br><span class="hljs-keyword">var</span> arr = str.split(<span class="hljs-string">&quot;-&quot;</span>);   <span class="hljs-comment">//[&quot;get&quot;, &quot;element&quot;, &quot;by&quot;, &quot;id&quot;];</span><br><br><br><span class="hljs-keyword">var</span> str1 = <span class="hljs-string">&quot;我们是123club组合我们的的年龄是19岁身高都在170公分以上&quot;</span>;<br><span class="hljs-comment">//希望通过中间在数字去拆分 [&quot;我们是&quot;,&quot;club组合哈组合我们的的年龄是&quot;,&quot;岁身高都在&quot;,&quot;公分以上&quot;];</span><br><span class="hljs-keyword">var</span> reg1 = <span class="hljs-regexp">/\d+/</span>;<br><span class="hljs-keyword">var</span> arr1 = str1.split(reg1);<br></code></pre></td></tr></table></figure>

<h4 id="search-搜索"><a href="#search-搜索" class="headerlink" title="search()搜索"></a>search()搜索</h4><p>之前在字符串里面，我们可以通过<code>search</code>查找某个字符串的索引位置，只是那个时候使用是<code>indexOf</code></p>
<p><strong>以前的情况下面</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str1 = <span class="hljs-string">&quot;大家好,我是人见人爱的张三，我的身高是170CM!&quot;</span>;<br><span class="hljs-keyword">var</span> str2 = <span class="hljs-string">&quot;大家好，我是高富帅李四，我的身高是186CM!&quot;</span>;<br><span class="hljs-keyword">var</span> str3 = <span class="hljs-string">&quot;大家好，我是美女西施，我的身高是169CM!&quot;</span>;<br><span class="hljs-keyword">var</span> str4 = <span class="hljs-string">&quot;大家好，我是古典成熟高质量男性小乐乐，我的身高是178CM!&quot;</span>;<br><span class="hljs-comment">//在上面的字符串当中，找所有的数字的位置</span><br>str1.indexOf(<span class="hljs-string">&quot;170&quot;</span>);<br>str2.indexOf(<span class="hljs-string">&quot;186&quot;</span>);<br>str3.indexOf(<span class="hljs-string">&quot;169&quot;</span>);<br>str4.indexOf(<span class="hljs-string">&quot;178&quot;</span>);<br><span class="hljs-comment">//这个参数在变化，如果这里有100个变量，我就有可能要写100句话</span><br>str1.search(<span class="hljs-regexp">/\d+/g</span>);<br>str2.search(<span class="hljs-regexp">/\d+/g</span>);<br>str3.search(<span class="hljs-regexp">/\d+/g</span>);<br>str4.search(<span class="hljs-regexp">/\d+/g</span>);<br><span class="hljs-comment">//这个时候的参数就固定成了一个正则表达式</span><br></code></pre></td></tr></table></figure>

<h4 id="replace-替换"><a href="#replace-替换" class="headerlink" title="replace()替换"></a>replace()替换</h4><p>它是字符串的方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;我爱你，你爱我吗？&quot;</span>;<br><span class="hljs-keyword">var</span> str1 = str.replace(<span class="hljs-string">&quot;爱&quot;</span>,<span class="hljs-string">&quot;恨&quot;</span>);  <span class="hljs-comment">//&quot;我恨你，你爱我吗？&quot;；</span><br></code></pre></td></tr></table></figure>

<p>replace方法默认情况下只会替换第一个匹配项，不会全局匹配，所以如果要全局匹配，则只能使用正则</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;我爱你，你爱我吗？&quot;</span>;<br><span class="hljs-keyword">var</span> str2 = str.replace(<span class="hljs-regexp">/爱/g</span>,<span class="hljs-string">&quot;恨&quot;</span>);		<span class="hljs-comment">//&quot;我恨你，你恨我吗&quot;;</span><br></code></pre></td></tr></table></figure>

<p>当我们所查找替换的元素一旦是通过正则匹配的，则<code>replace()</code>第二个参数就变了，它变成了一个回调函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;我爱你，你爱我吗？&quot;</span>;<br>str.replace(<span class="hljs-regexp">/爱/g</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p</span>) </span>&#123;<br>    <span class="hljs-comment">// 第一个参数：p代表正册表达式的匹配项</span><br>    <span class="hljs-built_in">console</span>.log(p);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>当正则表达式里面有原子组的时候</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;大家好，今天是2021-01-06 14:48:30,今天天气不好，有点冷&quot;</span>;<br><span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/\d&#123;4&#125;-(\d&#123;2&#125;)-\d&#123;2&#125;\s(\d&#123;2&#125;):\d&#123;2&#125;:\d&#123;2&#125;/g</span>;<br>str.replace(reg, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p,g1,g2</span>) </span>&#123;<br>    <span class="hljs-comment">// 第一个参数：正则匹配的结果</span><br>    <span class="hljs-comment">// 第后面开始的参数则代表原子组编号 group1   group2</span><br>    <span class="hljs-built_in">console</span>.log(p);<br>    <span class="hljs-built_in">console</span>.log(g1);<br>    <span class="hljs-built_in">console</span>.log(g2);<br>&#125;)<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/613f450f44eaada739626a89.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210913152135000"></p>
<p>上面的<code>01</code>就是原子组1的结果，<code>02</code>就是原子组2的结果</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 给一个连字符串例如：get-element-by-id转化成驼峰形（推荐使用正则表达式+replace的方式完成）</span><br><span class="hljs-keyword">var</span> str1 = <span class="hljs-string">&quot;get-element-by-id&quot;</span>;<br><span class="hljs-comment">//getElementById;</span><br><span class="hljs-keyword">var</span> str2 = str1.replace(<span class="hljs-regexp">/-([a-z])/g</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">p,g1</span>)</span>&#123;<br>    <span class="hljs-comment">// console.log(p,g1);</span><br>    <span class="hljs-keyword">return</span> g1.toUpperCase();<br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ol>
<li>正则只对字符串进行操作</li>
<li>正则的创建方式要弄清楚</li>
<li>正则的规则<ul>
<li>一元符</li>
<li>原子组与原子表</li>
<li>重复匹配</li>
<li>原子组编号</li>
<li>前瞻后顾</li>
</ul>
</li>
<li>使用到正则的地方目前你们所接触只有<code>String</code>对象与<code>RegExp</code>对象</li>
</ol>
<hr>
<h2 id="3-HTML5多媒体技术"><a href="#3-HTML5多媒体技术" class="headerlink" title="3.HTML5多媒体技术"></a>3.HTML5多媒体技术</h2><h3 id="音频Audio"><a href="#音频Audio" class="headerlink" title="音频Audio"></a>音频Audio</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">audio</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./assets/19.mp3&quot;</span> <span class="hljs-attr">controls</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">audio</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 或 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">audio</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./assets/30.mp3&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">audio</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>属性</strong></p>
<ol>
<li><code>controls</code>是否在页面上面显示控制器，它是一个单属性</li>
<li><code>autoplay</code>是否自动播放，它是一个单属性【当前属性在谷歌浏览器里面第一次使用无效】</li>
<li><code>currentSrc</code>当前音频标签的<code>src</code>地址</li>
<li><code>currentTime</code>当前音乐播放的进度时间，以秒为单位</li>
<li><code>duration</code>当前音乐的总时长，以秒为单位</li>
<li><code>ended</code>当前音频是否已经播放结束 ，它会触发<code>onended</code>事件</li>
<li><code>loop</code>是否单曲循环，它是一个单属性，<code>true</code>代表开启单曲循环，<code>false</code>则不开启单曲循环</li>
<li><code>muted</code>当前音频是否处于静音，它是一个单属性，<code>true</code>代表静音，<code>false</code>取消静音</li>
<li><code>networkState</code>表示当前媒体的网络连接状态：0表示空，1表示正在加载，2表示 正在加载元数据，3表示已经加载了第一帧，4表示加载完成</li>
<li><code>volume</code>代表当前音频的音量，它以数字为属性值 ，范围是<code>0~1</code>之间</li>
<li><code>playbackRate</code>代表当前音频的播放速率，默认是1</li>
<li><code>paused</code>代表当前音频是否处于暂停状态，它是一个单属性，<code>true</code>代表暂停，<code>false</code>代表播放状态</li>
<li><code>readyState</code>表示当前音频的准备状态，媒体是否已经就绪（可以播放了）。0表示数据不可用，1表示可以显示当前帧，2表示可以开始播放，3表示媒体可以从头到尾播放</li>
<li><code>preload</code>预先加载，三个属性值分别是<code>metadata</code>元数据，<code>none</code>不加载，<code>auto</code>自动</li>
</ol>
<p><strong>事件</strong></p>
<p>音频标签所有的事件都支持0级事件与2级事件</p>
<ol>
<li><code>oncanplay</code>当音频已经在加载，并且可以开始播放的时候会触发这个事件</li>
<li><code>onended</code>当前音频播放结束的时候触发，如果当前音频添加了<code>loop</code>单曲循环的属性，则永远不会触发这个事件</li>
<li><code>onloadeddata</code>媒体第一帧在加载的时候触发 </li>
<li><code>onplay</code>当音频播放的时候触发的事件</li>
<li><code>onpause</code>当音频在暂停的时候触发的事件</li>
<li><code>onratechange</code>当音频播放的速率发生变化的时候，就会触发这个事件</li>
<li><code>ontimeupdate</code>当音频的播放时间更新的时候触发的事件，只要是处于播放状态，这个事件会一直触发</li>
<li><code>volumechange</code>volume属性值或muted属性值已改变</li>
<li><code>waiting</code>当播放网络音频的时候，网络情况比较差，需要等待加载的时候（通俗的说就是缓冲），就会触发这个事件</li>
</ol>
<p><strong>方法</strong></p>
<ol>
<li><code>play()</code>让当前音频播放</li>
<li><code>pause()</code>让当前音频暂停</li>
</ol>
<h3 id="视频Video"><a href="#视频Video" class="headerlink" title="视频Video"></a>视频Video</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./assets/01.mp4&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;v1&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100%&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;700px&quot;</span> <span class="hljs-attr">controls</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/6143dc472ab3f51d91373e71.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210916183421976"></p>
<p>当前这个标签能够支持的视频格式非常有限，如上图所示，最常见的格式就是mp4格式</p>
<p>视频与音频非常相似，在属性与方法上面保持了一致，唯独多了一些的属性</p>
<ol>
<li><code>poster</code>视频的海报</li>
<li><code>requestFullscreen()</code>视频全屏播放</li>
<li><code>document.exitFullscreen()</code>视频退出全屏</li>
<li><code>requestPictureInPicture()</code>视频开启画中画播放</li>
<li><code>document.exitPictureInPicture()</code>退出画中画播放</li>
</ol>
<p>在工作当中我们一般会使用第三方的视频库来播放视频 ，它们的功能更齐全，使用更简单，目前主要使用的比较多的有两个</p>
<ol>
<li><p><code>videojs</code></p>
</li>
<li><p><code>aliplayer</code>这是阿里云的框架，它支持点播，直播以及多种模式</p>
<p><a target="_blank" rel="noopener" href="https://player.alicdn.com/aliplayer/index.html">阿里云Aliplayer播放器 (alicdn.com)</a></p>
<p><img src="https://pic.imgdb.cn/item/6143dc832ab3f51d91376b54.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210916185001374"></p>
</li>
</ol>
<hr>
<h3 id="文件与base64"><a href="#文件与base64" class="headerlink" title="文件与base64"></a>文件与base64</h3><p>base64是一种加密的数据，它不可以直接阅读，常用于HTTP网络传输，在计算机当中所有的文件都可以使用<code>base64</code>去表示，但是它需要借用助于HTML5的新兴API，叫<code>FileReader</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;img1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">onchange</span>=<span class="hljs-string">&quot;fileChange(this)&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fileChange</span>(<span class="hljs-params">ele</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> img1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.img1&quot;</span>);</span><br><span class="javascript">        <span class="hljs-keyword">if</span> (ele.files.length &gt; <span class="hljs-number">0</span>) &#123;</span><br><span class="javascript">            <span class="hljs-comment">//说明它有文件</span></span><br><span class="javascript">            <span class="hljs-keyword">var</span> file = ele.files[<span class="hljs-number">0</span>];</span><br><span class="javascript">            <span class="hljs-comment">//判断一下是不是图片类型</span></span><br><span class="javascript">            <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/^image\/(jpe?g|gif|png|bmp)$/</span>;</span><br><span class="javascript">            <span class="hljs-keyword">if</span> (reg.test(file.type)) &#123;</span><br><span class="javascript">                <span class="hljs-comment">//说明它是一个图片，然后将这个图片转换成base64格式</span></span><br><span class="javascript">                <span class="hljs-keyword">var</span> fileReader = <span class="hljs-keyword">new</span> FileReader();</span><br><span class="javascript">                <span class="hljs-comment">// dataURL格式就是base64格式</span></span><br><span class="javascript">                fileReader.readAsDataURL(file);</span><br><span class="javascript">                fileReader.onload = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">                    <span class="hljs-built_in">console</span>.log(fileReader.result);</span><br><span class="javascript">                    <span class="hljs-comment">// result属性就是文件的读取结果</span></span><br><span class="javascript">                    img1.src = fileReader.result;</span><br><span class="javascript">                &#125;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/6143dc942ab3f51d91377886.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210916195825017"></p>
<p>在上面的代码里面， 我们使用了 type=”file” 来选择文件，但这个文件选择框不能设置样式，所以我们可以单独设置一个按钮去完成</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">audio</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;bgm&quot;</span> <span class="hljs-attr">controls</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">audio</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;f1&quot;</span><span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span><span class="hljs-attr">style</span>=<span class="hljs-string">&quot;display:none;&quot;</span><span class="hljs-attr">onchange</span>=<span class="hljs-string">&quot;fileChange(this)&quot;</span>&gt;</span>	<br>	<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;chooseMusic()&quot;</span>&gt;</span>选择音乐<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">chooseMusic</span>(<span class="hljs-params"></span>) </span>&#123;   <span class="hljs-comment">//点击按钮触发input:file的点击事件</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> f1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#f1&quot;</span>);</span><br><span class="javascript">    f1.click(); <span class="hljs-comment">//触发input的点击事件</span></span><br><span class="javascript">&#125;</span><br><span class="javascript"></span><br><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fileChange</span>(<span class="hljs-params">ele</span>) </span>&#123;</span><br><span class="javascript">    <span class="hljs-keyword">if</span> (ele.files.length &gt; <span class="hljs-number">0</span>) &#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> file = ele.files[<span class="hljs-number">0</span>];</span><br><span class="javascript">        <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/^audio\/mpeg$/</span>;</span><br><span class="javascript">        <span class="hljs-keyword">if</span> (reg.test(file.type)) &#123;</span><br><span class="javascript">            <span class="hljs-keyword">var</span> fileReader = <span class="hljs-keyword">new</span> FileReader();</span><br><span class="javascript">            fileReader.readAsDataURL(file);</span><br><span class="javascript">            <span class="hljs-comment">// 文件读取完毕，会触发onload的就去</span></span><br><span class="javascript">            fileReader.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-keyword">var</span> base64Str = fileReader.result;</span><br><span class="javascript">                <span class="hljs-keyword">var</span> bgm = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#bgm&quot;</span>);</span><br><span class="javascript">                bgm.src = base64Str;   <span class="hljs-comment">//最后得到base64的字符串</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">&#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/6143e0342ab3f51d913a3de9.jpg" srcset="/blog/img/loading.gif" lazyload></p>
<p><strong>案例</strong><br>下面的案例就是一个最典型的图片上传的布局和封装过程</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;img-upload-box&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;this.children[1].click()&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/upload.svg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;display: none;&quot;</span> <span class="hljs-attr">onchange</span>=<span class="hljs-string">&quot;fileChange(this)&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fileChange</span>(<span class="hljs-params">ele</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">if</span> (ele.files.length &gt; <span class="hljs-number">0</span>) &#123;</span><br><span class="javascript">            <span class="hljs-keyword">var</span> file = ele.files[<span class="hljs-number">0</span>];</span><br><span class="javascript">            <span class="hljs-keyword">var</span> reg = <span class="hljs-regexp">/^image\/(jpe?g|png|gif|bmp|svg)$/</span>;</span><br><span class="javascript">            <span class="hljs-keyword">if</span> (reg.test(file.type)) &#123;</span><br><span class="javascript">                <span class="hljs-keyword">var</span> fileReader = <span class="hljs-keyword">new</span> FileReader();</span><br><span class="javascript">                fileReader.readAsDataURL(file);</span><br><span class="javascript">                fileReader.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">                    <span class="hljs-keyword">var</span> base64Str = fileReader.result;</span><br><span class="javascript">                    ele.previousElementSibling.src = base64Str;</span><br><span class="javascript">                &#125;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="center">上传前</th>
<th align="center">上传后</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><img src="https://pic.imgdb.cn/item/6143e21f2ab3f51d913bb41b.jpg" srcset="/blog/img/loading.gif" lazyload></td>
<td align="center"><img src="https://pic.imgdb.cn/item/6143e2422ab3f51d913bcdd6.jpg" srcset="/blog/img/loading.gif" lazyload></td>
</tr>
</tbody></table>
<h3 id="摄像头"><a href="#摄像头" class="headerlink" title="摄像头"></a>摄像头</h3><blockquote>
<p>赋值给<code>srcObject</code>不是<code>src</code></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;v1&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;500&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;500&quot;</span> <span class="hljs-attr">controls</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;openCamera()&quot;</span>&gt;</span>打开摄像头<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">openCamera</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        navigator.getUserMedia(&#123;</span><br><span class="javascript">            <span class="hljs-comment">// video代表视频</span></span><br><span class="javascript">            <span class="hljs-attr">video</span>: <span class="hljs-literal">true</span>,</span><br><span class="javascript">            <span class="hljs-comment">// audio代表音频</span></span><br><span class="javascript">            <span class="hljs-attr">audio</span>: <span class="hljs-literal">false</span></span><br><span class="javascript">        &#125;, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">stream</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-comment">//成功回调函数</span></span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;成功了&quot;</span>);</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(stream);</span><br><span class="javascript">            <span class="hljs-comment">/** <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLVideoElement&#125;</span></span>*/</span></span><br><span class="javascript">            <span class="hljs-keyword">var</span> v1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#v1&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">            <span class="hljs-comment">//将这个流赋值给视频标签v1的srcObject</span></span><br><span class="javascript">            v1.srcObject = stream;</span><br><span class="javascript">            v1.play();</span><br><span class="javascript"></span><br><span class="javascript">        &#125;, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-comment">//失败的回调函数</span></span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;失败了&quot;</span>);</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(error);</span><br><span class="javascript">        &#125;)</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="画布"><a href="#画布" class="headerlink" title="画布"></a>画布</h3><p>画布是HTML5 新出的一个标签，它指在让用户能够在页面上面完成任何绘画的效果，它有2D平面绘画 ，还有3D的立体绘画。我们前端程序员更喜欢把画布看成是一个模拟的屏幕，这个屏幕上面可以显示任何东西</p>
<h4 id="画布的创建"><a href="#画布的创建" class="headerlink" title="画布的创建"></a>画布的创建</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 画布canvas不能通过CSS来设置宽度高度 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;c1&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;500&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;400&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>注意</strong>：画布不能在CSS里面设置width/height，如果要设置宽度与高度，只能在HTML标签里面设置宽度与高度</p>
</blockquote>
<p>画布的创建非常简单，它只是一个标签，但是如果我们想在画布上面绘画东西，则需要一个画布对象，这个对象们叫<strong>绘画上下文对象</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/** </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@type<span class="hljs-type">&#123;HTMLCanvasElement&#125;</span></span></span><br><span class="hljs-comment">     * */</span><br><span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#c1&quot;</span>);<br><span class="hljs-comment">//得到画笔，画笔也叫绘画上下文</span><br><span class="hljs-keyword">var</span> ctx = c1.getContext(<span class="hljs-string">&quot;2d&quot;</span>);<br></code></pre></td></tr></table></figure>

<p>在上面我们通过方法<code>getContext(&quot;2d&quot;)</code>来获取了当前画布的2D绘画上下文，有了画布及画笔以后，我们就可以开始绘画了</p>
<p>在绘画之前一定分清楚两个事情，在2D绘画上下文里面，绘画的行为只有两种</p>
<ol>
<li>描边<code>stroke</code>，描边出来的东西是一个空心的</li>
<li>填充<code>fill</code>，填充出来的东西一定是一个实心的</li>
</ol>
<h4 id="常用属性及方法"><a href="#常用属性及方法" class="headerlink" title="常用属性及方法"></a>常用属性及方法</h4><ol>
<li><p><code>font</code>用于设置字体的大小及样式</p>
</li>
<li><p><code>strokeStyle</code>设置描边的颜色</p>
</li>
<li><p><code>fillStyle</code>设置填充的颜色</p>
</li>
<li><p><code>beginPath()</code>开始一个新路径，相当于提笔的一个操作过程</p>
</li>
<li><p><code>moveTo(x,y)</code>将笔移动到某一个坐标，不画线</p>
</li>
<li><p><code>lineTo(x,y)</code>画一条线到某一个地方</p>
</li>
<li><p><code>lineWidth</code>描边线条的宽度</p>
</li>
<li><p><code>lineCap</code>线条末端的形状，<code>butt</code>方头，<code>round</code>代表圆头，<code>square</code></p>
</li>
<li><p><code>closePath()</code>闭合路径，把开始的点和结束的点连接起来</p>
</li>
<li><p><code>stroke()</code>描边的方法，可以将一个路径进行描边</p>
</li>
<li><p><code>fill()</code>填充的方法，将内部进行填充</p>
</li>
<li><p><code>arc(x,y,radius,start,end,direction)</code>画一个圆</p>
<p>画圆的时候，它是以弧度单位在画，是从3点的钟的方向开始，默认是顺时针画</p>
</li>
</ol>
<p><strong>案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/** </span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type<span class="hljs-type">&#123;HTMLCanvasElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     * */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#c1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> ctx = c1.getContext(<span class="hljs-string">&quot;2d&quot;</span>);</span><br><span class="javascript">    <span class="hljs-comment">//第一步：笔架上先拿一支笔</span></span><br><span class="javascript">    ctx.beginPath();</span><br><span class="javascript">    <span class="hljs-comment">//第二步：将笔移动到画布的左上角</span></span><br><span class="javascript">    ctx.moveTo(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>);</span><br><span class="javascript">    <span class="hljs-comment">//第三步：画第一条线</span></span><br><span class="javascript">    ctx.lineTo(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>);</span><br><span class="javascript">    <span class="hljs-comment">//第四步：描边</span></span><br><span class="javascript">    ctx.stroke();</span><br><span class="javascript">    <span class="hljs-comment">//第五步：拿一个粗一点笔</span></span><br><span class="javascript">    ctx.beginPath();</span><br><span class="javascript">    ctx.lineWidth = <span class="hljs-number">5</span>;</span><br><span class="javascript">    ctx.strokeStyle = <span class="hljs-string">&quot;#ff0000&quot;</span>;</span><br><span class="javascript">    <span class="hljs-comment">//第六步：将笔移动到100,100的位置</span></span><br><span class="javascript">    ctx.moveTo(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>);</span><br><span class="javascript">    <span class="hljs-comment">//第七步：画一条线</span></span><br><span class="javascript">    ctx.lineTo(<span class="hljs-number">200</span>,<span class="hljs-number">100</span>);</span><br><span class="javascript">    <span class="hljs-comment">//第八步：描边</span></span><br><span class="javascript">    ctx.stroke();</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/6144873e2ab3f51d9115cc02.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210917093131498" style="zoom:50%;" />

<p>上面的案例其实就很形象的说明了这几个方法的作用</p>
<h4 id="绘制矩形"><a href="#绘制矩形" class="headerlink" title="绘制矩形"></a>绘制矩形</h4><ol>
<li><code>rect(x,y,width,height)</code>方法，描边一个矩形路径，然后再调用<code>stroke()</code>描边或<code>fill()</code>来填充</li>
<li><code>strokeRect(x,y,width,height)</code>方法，描边一个矩形，一次成型</li>
<li><code>fillRect(x,y,width,height)</code>方法，填充一个矩形，一次成型</li>
<li><code>clearRect(x,y,width,height)</code>方法，清除某一个矩形区域</li>
</ol>
<h4 id="绘制图像"><a href="#绘制图像" class="headerlink" title="绘制图像"></a>绘制图像</h4><p>在画布里面绘画图片分为静态图片的绘制与动态图片的绘制</p>
<p>绘制图片使用的是<code>drawImage(img,x,y,width,height)</code>方法</p>
<p><strong>静态绘制</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;img1&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/w04.jpg&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 画布canvas不能通过CSS来设置宽度高度 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;c1&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;500&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;400&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/** </span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type<span class="hljs-type">&#123;HTMLCanvasElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     * */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#c1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> ctx = c1.getContext(<span class="hljs-string">&quot;2d&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">//静态绘制</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> img1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#img1&quot;</span>);</span><br><span class="javascript">    img1.onload = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">//图片加载成功以后，我们就可以使用这一张图片绘画</span></span><br><span class="javascript">        ctx.drawImage(img1, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>, <span class="hljs-number">200</span>, <span class="hljs-number">250</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<ol>
<li>静态绘制是页面上面已经存在这个图片，然后我们获取这个图片以后，使用<code>drawImage()</code>方法来绘制图片</li>
<li>绘制图片的时候一定要等图片的onload事件完成（也就是图片加载完成以后再进行）</li>
</ol>
</blockquote>
<p><span style="color:red;font-weight:bold;">重点</span>：静态绘制最重要的一个点就是可以实现视频的屏幕</p>
<p><strong>案例一：使用静态绘制实现视频截图并下载</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>静态绘制就是绘制一个已经存在的东西<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;v1&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">controls</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./assets/bgg.mp4&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;c1&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;400&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;takePhoto()&quot;</span>&gt;</span>截图<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLVideoElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> v1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#v1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLCanvasElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#c1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> ctx = c1.getContext(<span class="hljs-string">&quot;2d&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">takePhoto</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">//将视频里面的东西画到的画布上面</span></span><br><span class="javascript">        ctx.drawImage(v1, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">400</span>, <span class="hljs-number">400</span>);</span><br><span class="javascript">        <span class="hljs-comment">//将画布面的信息转换成base64,dataURL格式就是base64格式</span></span><br><span class="javascript">        <span class="hljs-keyword">var</span> base64Str = c1.toDataURL(<span class="hljs-string">&quot;image/png&quot;</span>);</span><br><span class="javascript">        <span class="hljs-comment">//使用a标签进行下载</span></span><br><span class="javascript">        <span class="hljs-keyword">var</span> a = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&quot;a&quot;</span>);</span><br><span class="javascript">        a.href = base64Str;</span><br><span class="javascript">        a.download = <span class="hljs-string">&quot;标哥的截图.png&quot;</span>;</span><br><span class="javascript">        a.click();</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<ol>
<li><code>drawImage()</code>这个方法里面不仅可以绘制图片，还可以在以一个<code>video</code>视频为素材去绘制</li>
<li>上面的代码当中，我们还有一个功能就是下载，下载使用的是<code>a</code>标签在下载</li>
<li>我们刚刚还使用了一个方法<code>canvas.toDataURL()</code>，它是将<code>canvas</code>画布上面的数据转换成<code>base64</code>格式</li>
</ol>
</blockquote>
<p><strong>案例二：摄像头照相截图</strong></p>
<p>之前在讲视频<code>video</code>标签的时候顺带着讲了一下浏览器摄像头的使用，我们可以将摄像头的视频信息显示在<code>video</code>标签里面，再结合今天的<code>canvas</code> 就可以实现视频截图照相</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;v1&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">controls</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;c1&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;400&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;openCamera()&quot;</span>&gt;</span>打开摄像头<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;takePhoto()&quot;</span>&gt;</span>拍照<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLVideoElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> v1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#v1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLCanvasElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#c1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> ctx = c1.getContext(<span class="hljs-string">&quot;2d&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">openCamera</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        navigator.getUserMedia(&#123;</span><br><span class="javascript">            <span class="hljs-attr">video</span>: <span class="hljs-literal">true</span>,</span><br><span class="javascript">            <span class="hljs-attr">audio</span>: <span class="hljs-literal">false</span></span><br><span class="javascript">        &#125;, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">stream</span>) </span>&#123;</span><br><span class="javascript">            v1.srcObject = stream;</span><br><span class="javascript">            v1.play();</span><br><span class="javascript">        &#125;, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(error);</span><br><span class="javascript">        &#125;);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">takePhoto</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        ctx.drawImage(v1, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">400</span>, <span class="hljs-number">400</span>);</span><br><span class="javascript">        <span class="hljs-keyword">var</span> base64Str = c1.toDataURL(<span class="hljs-string">&quot;image/png&quot;</span>);</span><br><span class="javascript">        <span class="hljs-keyword">var</span> a = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&quot;a&quot;</span>);</span><br><span class="javascript">        a.href = base64Str;</span><br><span class="javascript">        a.download = <span class="hljs-string">&quot;摄像头截图.png&quot;</span>;</span><br><span class="javascript">        a.click();</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/61448ac22ab3f51d911ab5d4.png" srcset="/blog/img/loading.gif" lazyload></p>
<p><strong>动态绘制</strong></p>
<p>它是实时的创建我们需要绘制的素材，然后再去绘制</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLCanvasElement&#125;</span></span></span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#c1&quot;</span>);<br><span class="hljs-keyword">var</span> ctx = c1.getContext(<span class="hljs-string">&quot;2d&quot;</span>);<br><br><br><span class="hljs-comment">// var img = document.createElement(&quot;img&quot;);</span><br><span class="hljs-keyword">var</span> img = <span class="hljs-keyword">new</span> Image();<br>img.src = <span class="hljs-string">&quot;./img/w04.jpg&quot;</span>;<br>img.addEventListener(<span class="hljs-string">&quot;load&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    ctx.drawImage(img, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>, <span class="hljs-number">200</span>, <span class="hljs-number">250</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<ol>
<li>在上面的代码当中，我们动态的创建了一个图片，然后将这个图片<code>onload</code>以后去绘制</li>
<li>我们图片的创建可以使用<code>document.createElement(&quot;img&quot;)</code>也可以使用<code>new Image()</code>来完成（只有媒体标签可以）</li>
</ol>
</blockquote>
<h4 id="渐变设置"><a href="#渐变设置" class="headerlink" title="渐变设置"></a>渐变设置</h4><p>渐变在之前的CSS里面我们就已经接触过了，现在canvas里面也有渐变，它主要是线性渐变和径向渐变</p>
<h5 id="使用线性渐变"><a href="#使用线性渐变" class="headerlink" title="使用线性渐变"></a>使用线性渐变</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript">ctx.strokeRect(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>, <span class="hljs-number">300</span>, <span class="hljs-number">50</span>);<br><span class="hljs-comment">//创建一个线性渐变</span><br><span class="hljs-keyword">var</span> gradient = ctx.createLinearGradient(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">150</span>);<br>gradient.addColorStop(<span class="hljs-number">0</span>,<span class="hljs-string">&quot;red&quot;</span>);<br>gradient.addColorStop(<span class="hljs-number">0.5</span>,<span class="hljs-string">&quot;orange&quot;</span>);<br>gradient.addColorStop(<span class="hljs-number">1</span>,<span class="hljs-string">&quot;blue&quot;</span>);<br>ctx.fillStyle = gradient;<br>ctx.fillRect(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>, <span class="hljs-number">250</span>, <span class="hljs-number">50</span>);<br></code></pre></td></tr></table></figure>

<p><strong>效果图</strong></p>
<img src="https://pic.imgdb.cn/item/61448b462ab3f51d911b6d82.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210917103503263" style="zoom:50%;" />

<h5 id="径向渐变"><a href="#径向渐变" class="headerlink" title="径向渐变"></a>径向渐变</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//创建径向渐变</span><br>ctx.beginPath();<br>ctx.strokeRect(<span class="hljs-number">100</span>, <span class="hljs-number">200</span>, <span class="hljs-number">200</span>, <span class="hljs-number">200</span>);<br><span class="hljs-keyword">var</span> gradient2 = ctx.createRadialGradient(<span class="hljs-number">200</span>, <span class="hljs-number">300</span>, <span class="hljs-number">50</span>, <span class="hljs-number">200</span>, <span class="hljs-number">300</span>, <span class="hljs-number">100</span>);<br>gradient2.addColorStop(<span class="hljs-number">0</span>, <span class="hljs-string">&quot;red&quot;</span>);<br>gradient2.addColorStop(<span class="hljs-number">1</span>, <span class="hljs-string">&quot;blue&quot;</span>)<br>ctx.fillStyle = gradient2;<br>ctx.fillRect(<span class="hljs-number">100</span>, <span class="hljs-number">200</span>, <span class="hljs-number">200</span>, <span class="hljs-number">200</span>);<br></code></pre></td></tr></table></figure>

<p><strong>效果图</strong></p>
<img src="https://pic.imgdb.cn/item/61448d2a2ab3f51d911e4a68.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210917104151686" style="zoom:50%;" />

<h4 id="绘制文字"><a href="#绘制文字" class="headerlink" title="绘制文字"></a>绘制文字</h4><ol>
<li><code>strokeText(text,x,y,maxWidth?)</code>描边一个文字</li>
<li><code>fillText(text,x,y,maxWidth?)</code>填充一个文字</li>
<li><code>textAlign</code>设置文字的水平对齐方式，它有<code>start/center/end</code>三个位置</li>
<li><code>textBaseline</code>设置文字的垂直对齐，默认是基线，它还有<code>top/middle/bottom</code>三个位置</li>
</ol>
<h4 id="变换"><a href="#变换" class="headerlink" title="变换"></a>变换</h4><ol>
<li><code>translate(x,y)</code>移动画布的起点位置</li>
<li><code>rotate(angle)</code>它以<strong>弧度</strong>为单位，对画布进行旋转</li>
</ol>
<h4 id="配置的保存与还原"><a href="#配置的保存与还原" class="headerlink" title="配置的保存与还原"></a>配置的保存与还原</h4><ol>
<li><code>save()</code>将当前的配置保存起来，配置进行入栈操作</li>
<li><code>restore()</code>将配置栈里面的配置进行出栈操作，还原设置</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">* <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLCanvasElement&#125;</span></span></span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#c1&quot;</span>);<br><span class="hljs-keyword">var</span> ctx = c1.getContext(<span class="hljs-string">&quot;2d&quot;</span>);<br><br>ctx.font = <span class="hljs-string">&quot;32px 微软雅黑&quot;</span>;<br>ctx.fillStyle = <span class="hljs-string">&quot;black&quot;</span>;<br>ctx.fillText(<span class="hljs-string">&quot;第一次&quot;</span>,<span class="hljs-number">0</span>,<span class="hljs-number">50</span>);<br>ctx.save();     <span class="hljs-comment">//保存之前的配置，配置入栈</span><br><br>ctx.font = <span class="hljs-string">&quot;16px 宋体&quot;</span>;<br>ctx.fillStyle = <span class="hljs-string">&quot;#FF0000&quot;</span>;<br>ctx.fillText(<span class="hljs-string">&quot;第二次&quot;</span>,<span class="hljs-number">0</span>,<span class="hljs-number">100</span>);<br>ctx.save();     <span class="hljs-comment">//保存之前的配置，配置入栈</span><br><br>ctx.font = <span class="hljs-string">&quot;48px 华文行楷&quot;</span>;<br>ctx.fillStyle = <span class="hljs-string">&quot;#0000FF&quot;</span>;<br>ctx.fillText(<span class="hljs-string">&quot;第三次&quot;</span>,<span class="hljs-number">0</span>,<span class="hljs-number">150</span>);<br><br><span class="hljs-comment">//---------------------------------------</span><br>ctx.restore();   <span class="hljs-comment">//将之前的配置出栈</span><br>ctx.fillText(<span class="hljs-string">&quot;第四次&quot;</span>,<span class="hljs-number">0</span>,<span class="hljs-number">250</span>);<br><br>ctx.restore();   <span class="hljs-comment">//将之前的配置出栈</span><br>ctx.fillText(<span class="hljs-string">&quot;第五次&quot;</span>,<span class="hljs-number">0</span>,<span class="hljs-number">300</span>);<br><br>ctx.restore();<br>ctx.fillText(<span class="hljs-string">&quot;第六次&quot;</span>,<span class="hljs-number">0</span>,<span class="hljs-number">350</span>);<br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/61448e1e2ab3f51d911fc165.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210917144625819" style="zoom:50%;" />

<h4 id="使用图像数据"><a href="#使用图像数据" class="headerlink" title="使用图像数据"></a>使用图像数据</h4><p>在canvas的画布上面，图像的数据是可以转变成<code>base64</code>的，但是还可以使用另一种数值去表示 ，这个数值就是<code>rgba</code>,我们可以通过画布来获取画布的上面的原始数据（rgba数据）</p>
<ol>
<li><code>ctx.getImageData()</code>在画布上面获取图像数据</li>
<li><code>ctx.putImageData()</code>将一个图像数据放置在画布上面</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;img1&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/w06.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;c1&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;400&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLCanvasElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#c1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> ctx = c1.getContext(<span class="hljs-string">&quot;2d&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> img1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#img1&quot;</span>);</span><br><span class="javascript">    img1.addEventListener(<span class="hljs-string">&quot;load&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        c1.height = img1.clientHeight;</span><br><span class="javascript">        ctx.drawImage(img1, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, img1.clientWidth, img1.clientHeight);</span><br><span class="javascript">        <span class="hljs-comment">// 开始获取 图像数据</span></span><br><span class="javascript">        <span class="hljs-keyword">var</span> imageData = ctx.getImageData(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, c1.width, c1.height);</span><br><span class="javascript">        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; imageData.data.length; i += <span class="hljs-number">4</span>) &#123;</span><br><span class="javascript">            <span class="hljs-keyword">var</span> r = imageData.data[i];</span><br><span class="javascript">            <span class="hljs-keyword">var</span> g = imageData.data[i + <span class="hljs-number">1</span>];</span><br><span class="javascript">            <span class="hljs-keyword">var</span> b = imageData.data[i + <span class="hljs-number">2</span>];</span><br><span class="javascript">            <span class="hljs-keyword">var</span> avg = <span class="hljs-built_in">parseInt</span>((r + g + b) / <span class="hljs-number">3</span>);</span><br><span class="javascript">            imageData.data[i] = avg;</span><br><span class="javascript">            imageData.data[i + <span class="hljs-number">1</span>] = avg;</span><br><span class="javascript">            imageData.data[i + <span class="hljs-number">2</span>] = avg;</span><br><span class="javascript"></span><br><span class="javascript">        &#125;</span><br><span class="javascript">        <span class="hljs-comment">//将改好以后的【数据】重新放到画布里面去</span></span><br><span class="javascript">        ctx.putImageData(imageData, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>效果图</strong></p>
<p><img src="https://pic.imgdb.cn/item/61448e902ab3f51d912070ef.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210917171750021"></p>
<blockquote>
<p>上面的代码就是将我们的彩色图片使用图你数据片以后，变成了一个灰色图片</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/61448ec22ab3f51d9120bc04.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210917171846739"></p>
<p>上图就是我们所获取到的<code>ImageData</code>里面的数据，它是使用<code>rgba</code>来表示的</p>
<h4 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h4><p><img src="https://pic.imgdb.cn/item/6146c26e2ab3f51d915d0eae.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210918110832866"></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> ctx = c.getContext(<span class="hljs-string">&quot;2d&quot;</span>);    <span class="hljs-comment">//c 是 canvas的dom</span><br><span class="hljs-comment">// ctx.clearRect(e.offsetX, e.offsetY, 20, 20);</span><br><span class="hljs-comment">// 使用新方法</span><br>ctx.globalCompositeOperation = <span class="hljs-string">&quot;destination-out&quot;</span>; <span class="hljs-comment">//相交变透明</span><br>ctx.arc(e.offsetX, e.offsetY, <span class="hljs-number">5</span>, <span class="hljs-number">0</span>, <span class="hljs-built_in">Math</span>.PI * <span class="hljs-number">2</span>); <span class="hljs-comment">//画圆</span><br>ctx.fill(); <span class="hljs-comment">//填充</span><br></code></pre></td></tr></table></figure>



<h2 id="4-Ajax网络编程"><a href="#4-Ajax网络编程" class="headerlink" title="4.Ajax网络编程"></a>4.Ajax网络编程</h2><h3 id="关于前端的网络编程"><a href="#关于前端的网络编程" class="headerlink" title="关于前端的网络编程"></a>关于前端的网络编程</h3><p><img src="https://pic.imgdb.cn/item/614d36532ab3f51d9174e80a.png" srcset="/blog/img/loading.gif" lazyload></p>
<p>前端所涉及到网络编程主要是指两个点</p>
<ol>
<li>如果与服务器建立连接并发起请求</li>
<li>如果接收服务器返回给页面的数据</li>
</ol>
<p>在前端的网络编程里面，实现方式有多种多样，主要的还是以下几种</p>
<ol>
<li><code>ajax</code>异步请求</li>
<li><code>websocket</code>套接字双工通信</li>
<li><code>fetch</code>异步请求【ES6部分】</li>
</ol>
<h3 id="Ajax的介绍"><a href="#Ajax的介绍" class="headerlink" title="Ajax的介绍"></a>Ajax的介绍</h3><p>Ajax即<strong>A</strong>synchronous <strong>J</strong>avascript <strong>A</strong>nd <strong>X</strong>ML（异步JavaScript和<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/XML/86251">XML</a>）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: <a target="_blank" rel="noopener" href="https://baike.baidu.com/item/HTML/97049">HTML</a> 或 <a target="_blank" rel="noopener" href="https://baike.baidu.com/item/XHTML/316621">XHTML</a>, CSS, <a target="_blank" rel="noopener" href="https://baike.baidu.com/item/JavaScript/321142">JavaScript</a>, <a target="_blank" rel="noopener" href="https://baike.baidu.com/item/DOM/50288">DOM</a>, XML, <a target="_blank" rel="noopener" href="https://baike.baidu.com/item/XSLT/1330564">XSLT</a>, 以及最重要的<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/XMLHttpRequest/6788735">XMLHttpRequest</a>。 <strong>使用Ajax技术网页应用能够快速地局部更新</strong>呈现在<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2/6582461">用户界面</a>上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 </p>
<h3 id="Ajax的创建过程"><a href="#Ajax的创建过程" class="headerlink" title="Ajax的创建过程"></a>Ajax的创建过程</h3><p>Ajax的核心点就是<code>XMLHttpRequest</code>对象，在浏览器里面，我们可以通过这个东西来发请网络的HTTP/HTTPS请求</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> url = <span class="hljs-string">&quot;http://www.softeem.xin:8888/KuaiDi/getKuaiDiCom&quot;</span>;<br><span class="hljs-comment">//第一步：创建ajax对象</span><br><span class="hljs-keyword">var</span> xhr = <span class="hljs-keyword">new</span> XMLHttpRequest();<br><span class="hljs-comment">//第二步：建立连接</span><br><span class="hljs-comment">//GET代表请求方式</span><br><span class="hljs-comment">//url代表请求地址</span><br><span class="hljs-comment">//true代表当前的请求是异步请求</span><br>xhr.open(<span class="hljs-string">&quot;GET&quot;</span>, url, <span class="hljs-literal">true</span>);<br><span class="hljs-comment">//第三步：实时监控xhr的变化过程</span><br>xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (xhr.readyState == <span class="hljs-number">4</span> &amp;&amp; xhr.status == <span class="hljs-number">200</span>) &#123;<br>        <span class="hljs-keyword">var</span> result = xhr.responseText;<br>        <span class="hljs-comment">//第五步：得到的result是一个JSON的字符串，我们可以把它转成对象</span><br>        <span class="hljs-keyword">var</span> obj = <span class="hljs-built_in">JSON</span>.parse(result);<br>        <span class="hljs-built_in">console</span>.log(obj);<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">//第四步：真正执行</span><br>xhr.send();<br></code></pre></td></tr></table></figure>

<p>我们要根据这个xhr的核心对象来分析Ajax</p>
<h3 id="Ajax对象分析"><a href="#Ajax对象分析" class="headerlink" title="Ajax对象分析"></a>Ajax对象分析</h3><p><strong>属性</strong></p>
<ol>
<li><code>readyState</code>代表ajax的请求过程状态，它有0~4一共5个值</li>
<li><code>status</code>代表ajax的请求结果状态编码，200代表请求成功</li>
<li><code>timeout</code>设置请求超时时间，如果请求长时间得不到响应，最多超过多少响就判定为失败</li>
<li><code>responseText</code>请求成功以后服务器响应的文本信息</li>
<li><code>responseType</code>设置响应的数据类型，默认为文本类型<code>text</code><ul>
<li><code>arraybuffer</code>返回一个缓冲区</li>
<li><code>blob</code>二进制数据</li>
<li><code>document</code>返回一个网页文件</li>
<li><code>json</code>返回一个JSON格式的字符串给你，如果我们设置了这个格式，则在响应的时候它会自动的调用<code>JSON.parse()</code>来驿响应的字符串做转换</li>
<li><code>text</code>返回一个文本字符串</li>
</ul>
</li>
<li><code>response</code>服务器响应的结果，它不一定是文本信息，当我们<code>repnoseType</code>设置为<code>bolb</code>等其它信息的时候，这个地方就可以的接收服务器传回来的高级信息</li>
</ol>
<p><strong>方法</strong></p>
<ol>
<li><code>open(method,url,async)</code>打开某一个URL地址链接<ul>
<li>第一个参数代表请求方式，目前的请求方式有很多：<code>GET/POST/PUT/DELETE/OPTIONS</code>，当前阶段我们只考虑<code>GET</code>请求</li>
<li>第二个参数代表请求地址</li>
<li>第三个参数如果是true代表异步请求，false代表同请求。这是要注意，新版的浏览器里面只能设置为true的异步请求</li>
</ul>
</li>
<li><code>send()</code>开始发送请求</li>
<li><code>setRequestHeader()</code>设置请求头（后面的POST请求会用到）</li>
</ol>
<p><strong>事件</strong></p>
<ol>
<li><code>onreadystatechange</code>请求状态变化的事件</li>
<li><code>onabort</code>请求取消的时候的事件</li>
<li><code>onerror</code>请求失败以后触发的事件</li>
<li><code>onprogress</code> 请求的进度条发生变化的时候，后期使用ajax下载文件或上传文件的时候会使用到这个</li>
<li><code>ontimeout</code>请求超时的事件</li>
</ol>
<hr>
<h3 id="关于异步与同步的概念"><a href="#关于异步与同步的概念" class="headerlink" title="关于异步与同步的概念"></a>关于异步与同步的概念</h3><ul>
<li>同步等待</li>
<li>异步执行</li>
</ul>
<p>异步与同步是相对的，我们先通过2个场景来理解</p>
<p><strong>前提条件</strong></p>
<p>今天是9月22日，天气晴，标哥讲了一天的课，晚自习还要继续 ，太累了，忘记吃饭了，累！</p>
<p>标哥晚自习在讲Ajax，现在已经饿得受不了，给了<strong>李光昊</strong>同学5块钱，让它去<strong>财鱼面馆</strong>买一份瘦肉腰花三鱼面</p>
<ol>
<li>人物：标哥，李光昊</li>
<li>地点：财鱼面馆</li>
<li>事件：买瘦肉腰花面</li>
<li>结果：标哥吃</li>
</ol>
<p><strong>场景一：同步的场景</strong></p>
<p>李光昊拿着钱就跑了，标哥看着李光昊背景，久久不平静，饿得实在受不了，它要一直等，<strong>等</strong>李光昊把面买回来，吃了以后<strong>继续</strong>讲课</p>
<p><img src="https://pic.imgdb.cn/item/614d36942ab3f51d91753a7c.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210922185752956"></p>
<blockquote>
<p>上面的场景如果转换成时间线，我们可以看到，两个人的动作在一个时间线上面</p>
</blockquote>
<p><strong>场景二：异步的场景</strong></p>
<p>李光昊拿着钱跑了，标哥看着满教室学生期待的眼神，似乎看到了他们对于知识的求知若渴，所以非常学好意思停下来，它忍着内心的煎熬继续讲课，直到李光昊同学把面买回来，这个时候标哥的课也差不多讲完成了。最后同学样都惊呼：标哥不愧是时间管理大师</p>
<p><img src="https://pic.imgdb.cn/item/614d36d22ab3f51d91758b2b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210922190242109"></p>
<blockquote>
<p>上面的场景如果换成时间线来看待，两个人的动画在不同的时间线上面</p>
</blockquote>
<h3 id="状态码"><a href="#状态码" class="headerlink" title="状态码"></a>状态码</h3><blockquote>
<p>1xx：信息响应类，表示接收到请求并且继续处理<br>2xx：处理成功响应类，表示动作被成功接收、理解和接受<br>3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理<br>4xx：客户端错误，客户请求包含语法错误或者是不能正确执行<br>5xx：服务端错误，服务器不能正确执行一个正确的请求</p>
<p>100——客户必须继续发出请求<br>101——客户要求服务器根据请求转换HTTP协议版本<br>200——交易成功<br>201——提示知道新文件的URL<br>202——接受和处理、但处理未完成<br>203——返回信息不确定或不完整<br>204——请求收到，但返回信息为空<br>205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件<br>206——服务器已经完成了部分用户的GET请求<br>300——请求的资源可在多处得到<br>301——删除请求数据<br>302——在其他地址发现了请求数据<br>303——建议客户访问其他URL或访问方式<br>304——客户端已经执行了GET，但文件未变化<br>305——请求的资源必须从服务器指定的地址得到<br>306——前一版本HTTP中使用的代码，现行版本中不再使用<br>307——申明请求的资源临时性删除<br>400——错误请求，如语法错误<br>401——请求授权失败<br>402——保留有效ChargeTo头响应<br>403——请求不允许<br>404——没有发现文件、查询或URl<br>405——用户在Request-Line字段定义的方法不允许<br>406——根据用户发送的Accept拖，请求资源不可访问<br>407——类似401，用户必须首先在代理服务器上得到授权<br>408——客户端没有在用户指定的饿时间内完成请求<br>409——对当前资源状态，请求不能完成<br>410——服务器上不再有此资源且无进一步的参考地址<br>411——服务器拒绝用户定义的Content-Length属性请求<br>412——一个或多个请求头字段在当前请求中错误<br>413——请求的资源大于服务器允许的大小<br>414——请求的资源URL长于服务器允许的长度<br>415——请求资源不支持请求项目格式<br>416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段<br>417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求<br>500——服务器产生内部错误<br>501——服务器不支持请求的函数<br>502——服务器暂时不可用，有时是为了防止发生系统过载<br>503——服务器过载或暂停维修<br>504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长<br>505——服务器不支持或拒绝支请求头中指定的HTTP版本</p>
</blockquote>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/JavaScript/">JavaScript</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/09/27/JavaScript%E7%AC%94%E8%AE%B0-DOM/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript笔记-DOM</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/09/12/JavaScript%E7%AC%94%E8%AE%B0-2/">
                        <span class="hidden-mobile">JavaScript笔记-2</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
